<template>
  <div>
    <el-card>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="info" @click="$router.go(-1)">返回</el-button>
        </el-col>
      </el-row>
      <el-table :data="list" border default-expand-all row-key="id">
        <el-table-column
          label="评价内容"
          prop="content"
          fixed="left"
          width="400"
        ></el-table-column>
        <el-table-column
          label="用户昵称"
          align="center"
          prop="user_to.nick_name"
          width="200"
        ></el-table-column>
        <el-table-column
          label="头像"
          align="center"
          prop="user_to.avatar_url"
          width="80"
        >
          <template v-slot="scope">
            <el-image
              class="list_image"
              :src="scope.row.user_to.avatar_url"
              :preview-src-list="[scope.row.user_to.avatar_url]"
            >
              <div class="image-error">暂无图片</div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="80">
          <template v-slot="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.status ? '显示' : '隐藏'"
              placement="top"
              :enterable="false"
            >
              <el-switch
                v-model="scope.row.status"
                :disabled="btnStatus.evaluate_status"
                active-color="#5FB878"
                inactive-color="#d2d2d2"
                @change="set_status(scope.row)"
              ></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="添加时间"
          align="center"
          prop="created_at"
          width="140"
          sortable
        ></el-table-column>
        <el-table-column label="操作" align="center" width="100" fixed="right">
          <template v-slot="scope">
            <el-button
              :disabled="btnStatus.evaluate_destroy"
              type="danger"
              icon="iconfont icon-shanchu"
              size="mini"
              @click="destroy(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnStatus: this.is_string(
        {
          evaluate_status: "shop/consult/evaluate_status",
          evaluate_destroy: "shop/consult/evaluate_destroy"
        },
        this
      ),
      list: [] // 列表数据
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    // 获取列表
    get_list() {
      this.$base.request(
        {
          that: this,
          url: "shop/consult/evaluate_index",
          data: {
            id: this.$route.query.id
          }
        },
        res => {
          if (res.code === 8888) {
            this.list = res.data;
          }
        }
      );
    },
    // 菜单状态
    set_status(info) {
      this.$base.request(
        {
          that: this,
          method: "PUT",
          url: "shop/consult/evaluate_status",
          data: { id: info.id, status: info.status ? 1 : 0 }
        },
        res => {
          if (res.code === 8888) {
            this.$base.message({ that: this, message: res.msg });
          } else {
            info.status = !info.status;
          }
        }
      );
    },
    // 删除
    destroy(id) {
      this.$base.confirm({ that: this }, () => {
        this.$base.request(
          {
            that: this,
            method: "DELETE",
            url: "shop/consult/evaluate_destroy",
            data: { id: id }
          },
          res => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg });
              this.get_list();
            }
          }
        );
      });
    }
  }
};
</script>
